<!doctype html>
<html lang="en">
	<head>
		<title>Face tracker</title>
		<meta charset="utf-8">
		<style>
			#container {
				position : relative;
			}

			#canvas {
				position : absolute;
				left : 0;
				top : 0;
			}
		</style>
	</head>
	<body>
		<script src="./js/libs/utils.js"></script>
		<script src="../build/clmtrackr.js"></script>
		<div id="content">
			<h2>Example</h2>
			<div id="container">
				<video id="video" width="368" height="288" autoplay loop playsinline>
					<source src="./media/franck.mp4" type="video/mp4"/>
					<source src="./media/franck.webm" type="video/webm"/>
				</video>
				<canvas id="canvas" width="368" height="288"></canvas>
			</div>
			<p>Printing coordinates of the first 10 points in facial features:</p>
			<p id="positions"></p>
			<script>
				var videoInput = document.getElementById('video');

				var ctracker = new clm.tracker();
				ctracker.init();
				ctracker.start(videoInput);

				function positionLoop() {
					requestAnimFrame(positionLoop);
					var positions = ctracker.getCurrentPosition();
					// do something with the positions ...
					// print the positions
					var positionString = "";
					if (positions) {
						for (var p = 0;p < 10;p++) {
							positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>";
						}
						document.getElementById('positions').innerHTML = positionString;
					}
				}
				positionLoop();

				var canvasInput = document.getElementById('canvas');
				var cc = canvasInput.getContext('2d');
				function drawLoop() {
					requestAnimFrame(drawLoop);
					cc.clearRect(0, 0, canvasInput.width, canvasInput.height);
					ctracker.draw(canvasInput);
				}
				drawLoop();
			</script>
		</div>
	</body>
</html>
